.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;

  .game {
    display: flex;
    flex-direction: column;
    align-items: center;
    .btn {

      padding: 5px 20px;
      border-radius: 8px;
      color: #000;
      font-size: 24px;
      cursor: pointer;
      user-select: none;

      &.green {
        background: #3aad00;
        color: #fff;
      }

      &.yellow {
        background: #ffeb3b;
      }

      &:disabled {
        background: #6b6b6b;
        color: #c3c3c3;
        cursor: not-allowed;
      }
    }

    .roomLink {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24px;
      color: #999;
    }

    .actions {
      margin-top: 40px;
      display: flex;
      margin-bottom: 40px;
      font-size: 30px;
      align-items: center;
      position: relative;
      height: 60px;
      width: 100%;

      .handType {
        width: 36px;
        height: 36px;
        background: #7bbb5b;
        line-height: 36px;
        text-align: 36px;
        text-align: center;
        border-radius: 21px;
      }

      .desc {
        height: 100%;
        width: 100%;
        position: absolute;
        text-align: center;
        line-height: 60px;
        z-index: -1;
      }

      
    }

    .board {
      width: 600px;
      height: 600px;
    }

    .opponent {
      font-size: 28px;
      width: 100%;
      margin-top: 50px;
      text-align: center;
      height: 50px;
    }



  }

}